<!-- S search -->
<app-search-bar
  [submitLoading]="tableForms.tableLoading"
  [searchOptions]="searchOptions"
  labelFlex="50px"
  (onSearch)="queryResetData($event)"
  (onReset)="queryResetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="pagination-wrap-position m-t-2">
  <div class="opera-wrap">
    <button
      *ngIf="permission.userPermission.has('marketing:couponbagManage:add')"
      nz-button
      nzType="primary"
      class="m-r-10"
      (click)="jumpPage(0)">
      新增券包
    </button>

    <a
      nz-button
      nzType="primary"
      target="_blank"
      routerLink="/sell/sell-changecode-record">
      兑换码记录
    </a>
  </div>

  <!-- Table -->
  <div class="table-wrap p-t-10">
    <nz-table
      #basicTable
      nzSize="small"
      nzOuterBordered=""
      nzShowSizeChanger
      nzShowQuickJumper
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzScroll]="{ x: '1100px' }"
      [nzLoading]="tableForms.tableLoading"
      [nzData]="tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableForms.total"
      [nzPageIndex]="tableForms.page"
      [nzPageSize]="tableForms.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="80px">ID</th>
          <th nzAlign="center" nzWidth="120px">状态</th>
          <th nzAlign="center" nzWidth="180px">券包名称</th>
          <th nzAlign="center" nzWidth="170px">备注</th>
          <th nzAlign="center" nzWidth="150px">优惠内容</th>
          <th nzAlign="center" nzWidth="120px">兑换码数量</th>
          <th nzAlign="center" nzWidth="150px">已兑换数量</th>
          <th nzAlign="center" nzWidth="120px">创建人</th>
          <th nzAlign="center" nzWidth="170px">创建时间</th>
          <th nzAlign="center" nzWidth="460px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <!-- ID -->
          <td nzAlign="center">{{ data.id || '-' }}</td>
          <!-- 状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.state == 0 ? '#008000' : '#f00000'}">
              {{ data.state == 0 ? '启用' : '禁用' }}
            </span>
          </td>
          <!-- 券包名称 -->
          <td nzAlign="center">{{ data.name || '-' }}</td>
          <!-- 备注 -->
          <td nzAlign="center">{{ data.remark || '-' }}</td>
          <!-- 优惠内容 -->
          <td nzAlign="center">{{ data.content || '-' }}</td>
          <!-- 兑换码数量 -->
          <td nzAlign="center">{{ data.exchangeRecordCount || '0' }}</td>
          <!-- 已兑换数量 -->
          <td nzAlign="center">{{ data.exchangeExpendCount || '0' }}</td>
          <!-- 创建人 -->
          <td nzAlign="center">{{ data.founder || '-' }}</td>
          <!-- 创建时间 -->
          <td nzAlign="center">{{ data.createTime || '-' }}</td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              *ngIf="permission.userPermission.has('marketing:couponbagManage:view')"
              nz-button
              nzType="link"
              nzSize="small"
              (click)="jumpPage(2, data)">
              查看
            </button>
            <button
              *ngIf="permission.userPermission.has('marketing:couponbagManage:edit')"
              nz-button
              nzType="link"
              nzSize="small"
              (click)="jumpPage(1, data)">
              编辑
            </button>
            <a
              *ngIf="permission.userPermission.has('marketing:couponbagManage:delete')"
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认删除吗?"
              (nzOnConfirm)="deleteConfirm(data.id)">
              删除
            </a>
            <button
              *ngIf="permission.userPermission.has('marketing:couponbagManage:copy')"
              nz-button
              nzType="link"
              nzSize="small"
              (click)="jumpPage(3, data)">
              复制
            </button>
            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="manualModel(data.id)"
              [disabled]="data.state == 1" *ngIf="permission.userPermission.has('marketing:couponbagManage:manually')">
              手动发放
            </button>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showSendCodeModal(data)">
              增发兑换码
            </button>

            <a
              nz-button
              nzType="link"
              nzSize="small"
              routerLink="/sell/sell-changecode-record"
              [queryParams]="{couponBagId: data.id}"
              target="_blank">
              兑换码记录
            </a>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
  </div>
</nz-card>

<!-- model START -->
<nz-modal
    nzClassName="custom-model-wrap"
    [nzFooter]="null"
    [nzWidth]="400"
    [(nzVisible)]="isVisible"
    nzTitle="手动发放优惠券包"
    [nzOkLoading]="modelLoading"
    (nzOnCancel)="handleCancel()"
    (nzAfterClose)="closeModel($event)">

    <ng-container *nzModalContent>
      <div class="form-wrap custom-model-body">
        <p class="form-wp">请输入用户ID：</p>
        <input
          nz-input
          placeholder="用户ID"
          [(ngModel)]="userIdList"
        />

        <p class="tip-txt">※ 多个id用 “英文逗号” 分隔即可</p>
      </div>

      <div class="custom-model-foot">
        <div class="custom-foot-cont">
          <button nz-button nzType="default" (click)="handleCancel()">取消</button>
          <button nz-button nzType="primary" (click)="handleOk()">确认</button>
        </div>
      </div>
    </ng-container>

</nz-modal>
<!-- model END -->

<!-- S 增发兑换码 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="changeCodeVisible"
  [nzTitle]="'增发兑换码'"
  (nzOnCancel)="changeCodeVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="changeCodeForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>增发数量</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请输入增发数量!">
            <nz-input-number
              style="width: 100%;"
              [nzMin]="1"
              [nzMax]="99999"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入增发数量"
              formControlName="num"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>过期时间</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择过期时间!">
            <nz-date-picker
              nzShowTime
              nzFormat="yyyy-MM-dd HH:mm:ss"
              [nzDisabledDate]="disabledDate"
              formControlName="expireTime"
              (ngModelChange)="overTimeChange($event)"
            ></nz-date-picker>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="changeCodeVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="subChangeCodeLoading" (click)="subAddIssue()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 增发兑换码 -->
